<template>
	<view>
		<Header :isBack="true">
			<block slot="content">{{title}}({{totalCount}})</block>
			<block slot="right">{{rightTitle}}</block>
		</Header>

		<empty v-if="isLoaded === false || goodsList.length == 0" :top="182"></empty>

		<view class="" v-if="isLoaded === true && goodsList.length > 0">
			<view class="goods-list">
				<view v-for="(item, index) in goodsList" :key="index" class="goods-item">
					<view class="isCheck" v-show="isManager" style="z-index: 10;" @tap="togsigle(item.id)">
						<image src="/static/images/xuanzhong.png" style="width:32rpx;height:32upx;" mode=""
							v-if="item.isChecked"></image>
						<image src="/static/images/weixuanzhongb.png" style="width:32rpx;height:32upx;" mode="" v-else>
						</image>
					</view>
					<view class="image-wrapper" @click="navToDetailPage(item.product_id)">
						<image :src="item.product.cover_ico" mode="aspectFit"></image>
					</view>
					<text class="title clamp"
						@click="navToDetailPage(item.product_id)">{{item.product.product_name}}</text>
					<view class="price-box">
						<text class="price">{{item.product.member_price}}</text>
						<!-- <text>已售 {{item.product.sell_num}}</text> -->
					</view>
				</view>
				<view class="" style="text-align: center;width: 100%;">
					<uni-load-more :status="loadingType"></uni-load-more>
				</view>

			</view>

			<view class="operator" v-show="isManager">
				<view class="operator-left">
					<text>已选{{checkedArr.length}}个</text>
					<view class="operator-left-bottom" @tap="togAll">
						<image src="/static/images/xuanzhong.png" style="width:32rpx;height:32upx;margin-right:20upx;"
							mode="" v-show="isAll"></image>
						<image src="/static/images/weixuanzhongb.png"
							style="width:32rpx;height:32upx;margin-right:20upx;" mode="" v-show="!isAll"></image>
						全选
					</view>
				</view>
				<view class="operator-button" @tap="del">
					删除
				</view>
			</view>
		</view>

		<!-- 底部菜单 -->
		<BottomTabbar :selected="3"></BottomTabbar>
	</view>

</template>

<script>
	import BottomTabbar from '@/pages6/components/bottom-tabbar/shop-bottom-tabbar.vue';
	import empty from "@/components/empty";
	export default {
		data() {
			return {
				title: '我的收藏',
				rightTitle: '管理',
				isManager: false,
				isAll: true,
				checkedArr: [],

				loadingType: 'more', //加载更多状态

				goodsList: [],
				page: 1,
				totalCount: 0,
				isLoaded: false,

				isShowMsg: true,

			}
		},

		components: {
			BottomTabbar,
			empty
		},

		// 页面生命周期，下拉刷新后触发
		onPullDownRefresh() {
			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}
			this.loadData()

			// 停止下拉刷新
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 600)
		},

		//下拉到底获取新的数据
		onReachBottom() {
			this.getNewData();
		},

		onLoad: function(option) {
			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}

			uni.showLoading({
				title: '加载中...'
			});
			// this.title = option.title;
			this.loadData();
			setTimeout(() => {
				this.isLoaded = true;
				uni.hideLoading();
			}, 600)

			uni.$on('changeShopCollection', () => {
				if (this.page > 1) {
					--this.page;
				}

				this.isShowMsg = false;
				this.getNewData('refresh');
			})

			uni.$on('rightcli', () => {
				if (this.rightTitle == '管理') {
					this.rightTitle = '完成'
					this.isManager = true;
				} else if (this.rightTitle == '完成') {
					this.rightTitle = '管理'
					this.isManager = false;
				}
			})
		},
		methods: {
			async loadData() {
				this.page = 1;
				this.getNewData();
			},

			//职位列表
			async getNewData(op = "loading") {
				if (this.loadingType == 'nomore' && op == 'loading') {
					return false;
				}
				let token = uni.getStorageSync('token');
				let cate = uni.getStorageSync('cate');
				let dataObj = {
					page: this.page,
					token: token,
					cate: cate
				}

				let jdata = await this.$myRequest({
					url: '/shopCollect',
					data: dataObj,
					methods: 'POST'
				})
				let ndata = jdata.data.data.list;
				if (ndata) {
					ndata = ndata.map((item) => {
						item.isChecked = true;
						return item;
					})
				}
				this.totalCount = jdata.data.data.totalCount;

				if (this.page === 1) {
					this.goodsList = ndata;
					if (ndata.length === 0) {
						if (this.isShowMsg == true) {
							this.$api.msg('亲！暂无数据！！！')
						}
					} else {
						this.page = this.page + 1;
					}
				} else {
					if (ndata.length === 0) {
						if (this.goodsList.length === 0) {
							if (this.isShowMsg == true) {
								this.$api.msg('亲！暂无数据！！！')
							}
						} else {
							if (this.isShowMsg == true) {
								this.$api.msg('亲！已经到底了！！！')
							}
						}

					} else {
						this.goodsList = [...this.goodsList, ...ndata];
						this.page = this.page + 1;
					}
				}

				if (this.totalCount > this.goodsList.length) {
					this.loadingType = 'more'
				} else {
					this.loadingType = 'nomore'
				}

				if (this.isAll) {
					this.checkedArr = this.goodsList.map((item) => {
						return item.id
					})
				}
			},

			//详情
			navToDetailPage(id) {
				uni.navigateTo({
					url: `/pages6/pages/product/product?id=${id}`
				})
			},

			togsigle(id) {
				this.goodsList = this.goodsList.map((item) => {
					if (item.id == id) {
						item.isChecked = !item.isChecked;
					}

					return item
				})


				if (this.checkedArr.indexOf(id) > -1) {
					this.checkedArr.splice(this.checkedArr.indexOf(id), 1);
				} else {
					this.checkedArr.push(id)
				}

				if (this.checkedArr.length >= this.totalCount) {
					this.isAll = true;
				} else {
					this.isAll = false;
				}
			},

			togAll() {
				this.isAll = !this.isAll;
				this.checkedArr = [];
				this.goodsList = this.goodsList.map((item) => {
					item.isChecked = this.isAll;
					if (this.isAll) {
						this.checkedArr.push(item.id)
					}

					return item
				})

			},

			async del() {
				if (this.checkedArr.length == 0) {
					this.$api.msg('请先选择删除项');
					return false;
				}
				let token = uni.getStorageSync('token');
				let cate = uni.getStorageSync('cate');
				let dataObj = {
					token: token,
					cate: cate,
					ids: this.checkedArr
				}
				let res = await this.$myRequest({
					url: '/delCollect',
					data: dataObj,
					methods: 'POST'
				})

				this.page = 1;
				this.isAll = true;
				this.getNewData('refresh');

				this.$api.msg(res.data.msg)

			}
		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
		font-size: $font-base;
	}
</style>
<style lang='scss' scoped>
	.goods-list {
		// #ifdef APP-PLUS
		padding: 182rpx 30upx 180rpx;
		// #endif
		// #ifdef MP-WEIXIN
		padding: 182rpx 30upx 180rpx;
		// #endif
		// #ifdef H5
		padding: 130rpx 30upx 180rpx;
		// #endif

		width: 100%;
		display: flex;
		flex-wrap: wrap;
		background: #fff;

		.goods-item {
			position: relative;
			display: flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 40upx;

			&:nth-child(2n+1) {
				margin-right: 4%;
			}
		}

		.isCheck {
			position: absolute;
			top: -16upx;
			left: -16upx;
		}

		.image-wrapper {
			width: 100%;
			width: 330upx;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}

		.title {
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 80upx;
		}

		.price-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 10upx;
			font-size: 24upx;
			color: $font-color-light;
		}

		.price {
			font-size: $font-base;
			color: $uni-color-primary;
			line-height: 1;

			&:before {
				content: '￥';
				font-size: 26upx;
			}
		}
	}

	.operator {
		position: fixed;
		bottom: 0;
		height: 150upx;
		box-shadow: 2px -3px 100px -5px #eee;
		background-color: #fff;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 21upx 40upx;
		font-size: 30upx;
		color: #545455;
	}

	.operator-left {
		line-height: 54upx;
	}

	.operator-left-bottom {
		display: flex;
		align-items: center;
	}

	.operator-button {
		height: 76upx;
		width: 196upx;
		border-radius: 38upx;
		background-color: $base-color;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
